<template>
  <div class="echarts-inner"/>
</template>

<script>
  import echarts from 'echarts'
  import theme from '@/utils/echartsTheme'

  require('echarts/theme/macarons') // echarts theme
  import { debounce } from '@/utils'

  export default {
    props: {
      autoResize: {
        type: Boolean,
        default: true
      },
      echartsData: {
        type: Object
      }
    },
    data() {
      return {
        chart: echarts
      }
    },
    mounted() {
      this.setOptions(this.echartsData)
      if (this.autoResize) {
        this.__resizeHandler = debounce(() => {
          if (this.chart) {
            this.chart.resize()
          }
        }, 100)
        window.addEventListener('resize', this.__resizeHandler)
      }
      // 监听侧边栏的变化
      this.sidebarElm = document.getElementsByClassName('pageNav')[0]
      this.sidebarElm && this.sidebarElm.addEventListener('transitionend', this.sidebarResizeHandler)
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      if (this.autoResize) {
        window.removeEventListener('resize', this.__resizeHandler)
      }
      this.sidebarElm && this.sidebarElm.removeEventListener('transitionend', this.sidebarResizeHandler)
      this.chart.dispose()
      this.chart = null

    },
    methods: {
      sidebarResizeHandler(e) {
        if (e.propertyName === 'width') {
          this.__resizeHandler()
        }
      },
      setOptions(echartsData = {}) {
        const th = this
        echartsData.pieLength = echartsData.pieLength || echartsData.dataset.length - 1
        th.chart = echarts.init(th.$el, 'wg')
        let A = []
        echartsData.yAxis && echartsData.yAxis.forEach((item, index) => {
          A.push({
            type: 'value',
            name: item.name,
            min: item.min || null,
            max: item.max || null,
            position: (index === 0 ? 'left' : 'right'),
            axisLabel: {
              formatter: item.formatter
            }
          })
        })
        echartsData.yAxis = A
        A = []
        th.chart.on('click', function (parmas) {
          const data = []
          parmas.value.splice(1, echartsData.pieLength).forEach((item, index) => {
            data[index] = {
              value: item,
              name: echartsData.dataset[index + 1][0]
            }
          })
          th.chart.setOption({
            title: {
              subtext: parmas.name,
            },
            series: {
              id: 'pie',

              label: {
                formatter: '{b}:\n{c}km³\n{d}%'
              },
              data: data,
            }
          })
        })

        echartsData.legend = []
        echartsData.series = []
        echartsData.dataset.forEach((item, index) => {
          if (index > 0) {
            echartsData.legend.push(item[0])
            const isBar = index<=echartsData.pieLength
            echartsData.series.push({
              type:isBar?'bar':'line',
              smooth: true,
              seriesLayoutBy: 'row',
              yAxisIndex: isBar?0:1,
            })
            if (index <= echartsData.pieLength) A.push({ name: item[0], value: item[1] })
          }
        })
        echartsData.series.push({
          type: 'pie',
          id: 'pie',
          radius: '40%',
          center: ['87%', '50%'],
          label: {
            formatter: '{b}:\n{c}' + echartsData.unitName[0] + '\n{d}%'
          },
          data: A
        })
        A = []
        th.chart.setOption({
          grid: {
            top: 60,
            left: '3%',
            right: '25%',
            bottom: 0,
            containLabel: true
          },
          title: {
            subtext: echartsData.dataset[0][1],
            left: 'right',
            subtextStyle: {
              align: 'center',
            }
          },
          dataset: {
            source: echartsData.dataset
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: (e) => {
              let re = [e[0].name + '<br/>']
              e.forEach((item, i) => {
                re.push(item.seriesName + ':' + item.value[i + 1]
                  + echartsData.unitName[i < echartsData.pieLength ? 0 : 1] + '<br/>')
              })
              return (re.join(''))
            }
          },
          legend: {
            data: echartsData.legend
          },
          xAxis: {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            }
          },
          yAxis: echartsData.yAxis,
          series: echartsData.series
        })
      }
    }
  }
</script>
<style scoped>
  .echarts-inner {
    height: 100%;
  }
</style>
